<template>
  <div class="my-container">
    <!-- 未登录板块 -->
    <div class="offline" v-if="loginOutShow">
      <div class="login-box" @click="$router.push({ path: '/login' })">
        <img src="../../assets/logo.png" alt=""/>
        <span>登录/注册</span>
      </div>
      <svg-icon icon-class="offlineBg" width="100%" height="70vh" class="icon"/>
    </div>

    <!-- 已登录板块 -->
    <div class="online" v-else>
      <span @click="$router.push({path:'/user'})">
        <svg-icon icon-class="duijie" width="30px" height="30px" class="setIcon"/>
      </span>
      <!-- 用户信息区 -->
      <div class="base-info">
        <div class="left">
          <van-image
            class="avatar"
            round
            :src="userInfo.user_pic ?? require('@/assets/icons/girl.png')"
          />
          <div class="name">
            <div class="uName">{{ userInfo.username }}
              <svg-icon v-show="!userInfo.sex" icon-class='man' width="18px" height="18px"
                        style="margin-left: 10px;margin-top: -5px" class="genderIcon"/>
              <svg-icon v-show="userInfo.sex" icon-class='woman' width="24px" height="24px"
                        style="margin-left: 7px;margin-top: -5px" class="genderIcon"/>
            </div>
            <div class="signature">{{ userInfo.signature }}</div>
            <div class="start">{{ getZodiacSign(userInfo.birthday).name }}</div>
          </div>
          <van-image
            class="loveAvatar"
            round
            :src="loverInfo.user_pic ?? require('@/assets/icons/boy.png')"
          />
        </div>
      </div>

      <!-- 四个选项 -->
      <div class="fn">常用功能</div>
      <van-grid :column-num="4">
        <van-grid-item text="纪念日" @click="$router.push({ path: '/memories' })">
          <template #icon>
            <svg-icon style="margin-bottom: 3px;" icon-class='rili-xin' width="30px" height="30px" class="icon"/>
          </template>
        </van-grid-item>
        <van-grid-item text="秀恩爱" @click="$router.push({ path: '/dynamic' })">
          <template #icon>
            <svg-icon style="margin-bottom: 3px;" icon-class='xiangpian' width="30px" height="30px" class="icon"/>
          </template>
        </van-grid-item>
        <van-grid-item text="愿望清单" @click="$router.push({ path: '/aspiration' })">
          <template #icon>
            <svg-icon style="margin-bottom: 3px;" icon-class='xin-xinfeng' width="30px" height="30px" class="icon"/>
          </template>
        </van-grid-item>
        <van-grid-item text="安全期" @click="$router.push({ path: '/safe' })">
          <template #icon>
            <svg-icon style="margin-bottom: 3px;" icon-class='xin-qinglv' width="30px" height="30px" class="icon"/>
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 单元格-->
      <div class="cellWrap">
        <div class="helpFn">辅助功能</div>
        <van-cell title="你的“TA”" is-link @click="$router.push({ path: `/loverPerson/${loverInfo.id}` })"
                  :value="daysSince?'在一起 '+daysSince+' 天':''">
          <template #icon>
            <svg-icon v-show="!userInfo.sex" icon-class="hunsha" width="25px" height="25px" class="icon"/>
            <svg-icon v-show="userInfo.sex" icon-class="lifu" width="25px" height="25px" class="icon"/>
          </template>
        </van-cell>
        <van-cell title="意见反馈" is-link>
          <template #icon>
            <svg-icon icon-class="xianhua" width="25px" height="25px" class="icon"/>
          </template>
        </van-cell>
        <van-cell title="分享应用" is-link @click="showShare=true">
          <template #icon>
            <svg-icon icon-class="jiezhi-lihe" width="25px" height="25px" class="icon"/>
          </template>
        </van-cell>
        <van-cell title="帮助中心" is-link @click="$router.push({ path: '/opinion' })">
          <template #icon>
            <svg-icon icon-class="xin-guo" width="25px" height="25px" class="icon"/>
          </template>
        </van-cell>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <van-cell title="Log out" class="loginOut" v-if="!loginOutShow" @click="loginOut"/>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import { getZodiacSign } from '@/utils/start'
import dayjs from 'dayjs'

export default {
  name: 'MyIndex',

  data () {
    return {
      userInfo: {},
      loginOutShow: false,
      loverInfo: [],
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  computed: {
    daysSince () {
      return dayjs().diff(dayjs(this.userInfo.together), 'day')
    }
  },
  created () {
    // 进入个人中心页面时，就要请求数据（只有登录时触发）
    if (this.$store.state.user) {
      // 请求接口
      this.loadUserInfo()
    }
  },

  methods: {
    getZodiacSign,
    // 请求用户信息
    async loadUserInfo () {
      try {
        const res = await getUserInfoAPI()
        console.log(res)
        if (res.data.message === 'jwt expired') {
          this.loginOutShow = true
          return
        }
        this.userInfo = res.data.data
        if (res.data.loverData) {
          this.loverInfo = res.data.loverData
        }

        if (!this.userInfo.signature) {
          this.userInfo.signature = '快来创造独属于你们的恋爱宣言吧！'
        }
      } catch (error) {
        this.loginOutShow = true
        console.log(error)
      }
    },

    // 退出登录
    loginOut () {
      this.$dialog.confirm({
        title: '是否确定退出登录？'
      })
        .then(() => {
          // 点击确认时触发的事件
          // 清空 $store.state.user 用户信息 （不仅要干掉vuex中的数据，还要干掉本地存储中的）
          this.$store.commit('setUser', {})
          this.$router.push({ path: '/login' })
        })
        .catch(() => {
          // on cancel
          // 点击取消时触发的事件
        })
    }
  }
}
</script>

<style scoped lang="less">
.my-container {

  .offline {

    .login-box {
      margin-top: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 65px;
        height: 65px;
      }

      span {
        margin-top: 8px;
        font-size: 16px;
        letter-spacing: 2px;
      }
    }

    .icon {
      text-align: center;
    }

  }

  .online {

    .setIcon {
      position: absolute;
      top: 10px;
      right: 10px
    }

    .base-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 38px 16px 0;

      .left {
        position: relative;
        display: flex;
        align-items: center;

        .avatar {
          width: 55px;
          height: 55px;
          border: 2px solid #ffffff;
        }

        .loveAvatar {
          top: 37px;
          left: 37px;
          position: absolute;
          width: 25px;
          height: 25px;
          border: 2px solid #ffffff;
        }

        .name {
          margin-left: 20px;
          font-size: 18px;
          font-weight: bolder;

          .genderIcon {
            //padding-top: -10px;
          }

          .uName {
            height: 30px;
          }

          .signature {
            font-size: 12px;
            font-weight: normal;
          }

          .start {
            margin-top: 8px;
            padding: 3px 0px;
            text-align: center;
            letter-spacing: 1px;
            color: #fff;
            border-radius: 10px;
            width: 60px;
            font-size: 12px;
            background-color: #ac92eb;
          }
        }
      }
    }

    .fn {
      margin: 0 10px;
      padding: 7px 7px 0 7px;
      margin-top: 5vh;
      background-color: #fff;
      font-size: 14px;
      font-weight: bold;
      border-radius: 10px 10px 0 0;
    }

    // 样式穿透 - 第三方的组件样式可能会影响不到
    ::v-deep .van-grid {
      padding: 0 10px;

      &::after, &::before {
        border: none;
      }

      .van-grid-item {
        .van-grid-item__content {

          &::after {
            border: none;
          }
        }
      }

    }

    .cellWrap {
      margin: 10px;

      .helpFn {
        padding: 9px 9px 0 9px;
        background-color: #fff;
        font-size: 14px;
        font-weight: bold;
        border-radius: 10px 10px 0 0;
      }

      .van-cell {
        &::after {
          border: none;
        }

        font-size: 13px;
        letter-spacing: .5px;
        padding: 13px;

        .van-cell__title {
          margin-left: 3px;
        }

        //margin: 0 10px;
      }
    }

  }

  .loginOut {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    border-radius: 20px;
    background-color: #eaa49d;
    Letter-spacing: 3px;
    font-size: 16px;
    font-weight: bold;

    .van-cell__title {
      text-align: center;
      color: #fff;
    }
  }

}
</style>
